<template>
  <div>
    <Tinymce v-model="innerContent" :photoSize='photoSize'/>
    <el-button
      v-if="!showBtn"
      :disabled="canSubmitInfo"
      class="right"
      type="primary"
      style="marginTop:15px;"
      @click="submit"
    >保 存</el-button>
  </div>
</template>

<script>
import Tinymce from '~/components/Tinymce';
export default {
  components: {
    Tinymce
  },
  props: ['content', 'category1', 'showBtn',"photoSize"],
  data() {
    return {
      innerContent: '',
      category: '',
      canSubmitInfo: true,
      initContent: ''
    }
  },
  watch: {
    innerContent(newd) {
      newd !== this.initContent ? (this.canSubmitInfo = false) : '';
      if (this.$props.showBtn) {
        this.replacers()
        this.$emit('submitText', {
          text: this.innerContent,
          category: this.category
        })
      }
    },
    content(newd) {
      this.innerContent = this.$props.content
      this.initContent = this.$props.content
      this.category = this.$props.category1
    }
  },
  methods: {
    replacers() {
      this.innerContent = this.innerContent.replace(/<video/g, `<iframe`)
      this.innerContent = this.innerContent.replace(/controls="controls"/g, ``)
      this.innerContent = this.innerContent.replace(
        /\/><\/video>/g,
        `></iframe>`
      )
      this.innerContent = this.innerContent.replace(/>[^-]<source/g, ``)
      this.innerContent = this.innerContent.replace(
        /<audio src=/g,
        `<iframe src=`
      )

      this.innerContent = this.innerContent.replace(/<\/audio>/g, `<\/iframe>`)
      this.innerContent = this.innerContent.replace(/controls="controls"/g, ``)
    },
    submit() {
      this.replacers()
      this.canSubmitInfo = true
      this.$emit('submitText', {
        text: this.innerContent,
        category: this.category
      })
    }
  }
}
</script>

<style>
.ql-editor {
  min-height: 400px;
}
</style>
